<template>
  <section class="bw-design-left">
    <BwSideToolber v-model:value="curSideKey" />

    <div class="bw-design-left-content">
      <component :is="curEle" />
    </div>
  </section>
</template>

<script lang="ts" setup>
import { useDesignLeft } from './util'
import BwSideToolber from './side/index.vue'

const { curEle, curSideKey } = useDesignLeft()
</script>

<style lang="less" scoped>
.bw-design-left {
  width: 350px;
  height: 100%;
  flex-shrink: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .bw-design-left-content {
    height: 100%;
    display: inline-flex;
    width: calc(100% - 40px);
  }
}
</style>
